<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script src="../js/promise_ajax.js"></script>

    <script>


        // then 方法本身也是异步的

        // 想得到1 2 3

        // ajax('get', '../php/1.php').then(res => {
        //     console.log(res);
        // })

        // ajax('get', '../php/2.php').then(res => {
        //     console.log(res);
        // })


        // ajax('get', '../php/3.php').then(res => {
        //     console.log(res);
        // })


        // 依然是嵌套

        // ajax('get', '../php/1.php').then(res => {
        //     console.log(res);
        //     ajax('get', '../php/2.php').then(res => {
        //         console.log(res);
        //         ajax('get', '../php/3.php').then(res => {
        //             console.log(res);
        //         })
        //     })
        // })


        function fn1() {
            return ajax('get', '../php/1.php');
        }

        function fn2() {
            return ajax('get', '../php/2.php');
        }

        function fn3() {
            return ajax('get', '../php/3.php');
        }



        // promise可以使用链式操作解决地狱回调的问题
        fn1()
            .then(res => {
                console.log(res);
                return fn2();   // 也是一个promise实例
            })
            .then(res => {
                console.log(res);
                return fn3();
            })
            .then(res => {
                console.log(res);
            })





        // then方法会默认返回一个promise实例 ， 把then的参数(也是一个函数)的返回值作为新的promise的result

        // fn1()
        //     .then(function (res) {
        //         console.log(res);
        //     })
        //     .then(res => {
        //         console.log(res);   // undefined
        //     })




        // fn1()
        //     .then(function (res) {
        //         console.log(res);
        //         return 888;
        //     })
        //     .then(res => {
        //         console.log(res);   // 888
        //     })



    </script>

</body>

</html>